<script>
export default {
  data() {
    return {
      ul_li: 0,
    }
  },
  // 退出登录
  methods: {
    logut() {
      localStorage.clear()
      this.$message.success("退出成功！")
    }
  }
}
</script>
<template>
  <div class="app">
    <div class="bg">
    <div class="div_headler">
      <h1>商家后台管理</h1>
    </div>
      <aside>
        <div>
          <img src="./image/logo.png">
        </div>
      <ul>
        <a href="/home"><li><img src="./image/shujutongji.png">数据统计</li></a>
        <a href="/home/user"><li><img src="./image/yonghu.png">用户信息</li></a>
        <a href="/home/goods"><li><img src="./image/shangpin_1.png">商品信息</li></a>
        <a href="/home/personalcenter"><li><img src="./image/biaoqing.png">个人中心</li></a>
        <a href="/" @click="logut()"><li><img src="./image/tuichudenglu.png" class="logon_img">退出登录</li></a>
      </ul>
    </aside>
    <section>
      <router-view/>
    </section>
    </div>
  </div>
</template>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a{
  text-decoration: none;
  color: #000;
}
li:hover,.actived {
  background-color: #bcb976;
}
li{
  list-style-type: none; // 去掉前面的无序标识
}
.app{
  position: relative;
  .bg{
    position: fixed;
    background: rgba(235, 235, 235, 1);
    width: 100%;
    height: 100%;
    .div_headler {
      position: relative;
      left: 260px;
      text-align: left;
      background-color: #fff;
      height: 50px;
      line-height: 50px;
      width: 100%;
      padding-left: 20px;
      border-bottom: 1px solid #999;

    }
  }
  aside {
    position: absolute;
    top: 0;
    width: 260px;
    height: 1600px;
    background-color: #37384C;
    // div {
    //   // 当前用户这里没写完
    // }
    ul{
      padding-top: 50px;
      li{
        position: relative;
        font-size: 22px;
        height: 70px;
        line-height: 70px;
        color: #000;
        // background-color: #bcb976;
        width: 200px;
        border-radius: 0 50px 50px 0;
        img {
        position: absolute;
        left: 15px;
        top: 17px;
        width: 35px;
        height: 35px;
      }
      .logon_img {
        width: 25px;
        height: 25px;
        left: 22px;
        top: 22px;
      }
      }

    }
  }

  section {
    position: absolute;
    top: 150px;
    right: 180px;
    width: 1200px;
    height: 700px;
    background:#fffe;
    overflow: hidden;
    border: 1px solid #666;
  }
}
</style>